<template>
    <div ref="existingBasis" id="existingBasis"></div>
</template>

<script>
import E from 'wangeditor'
var phoneEditor, _this
export default {
  components: {},
  props: {
    existingBasisVal: {
      type: String,
      required: false
    },
     writeable:{
      type:Boolean,
      value:true
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {
    _this = this
    _this.existingBasisVal=_this.existingBasisVal
    phoneEditor = new E(this.$refs.existingBasis)
    phoneEditor.customConfig.pasteFilterStyle = false
    phoneEditor.customConfig.onchange = html => {
      _this.$emit('existingBasis', html)
    }
    phoneEditor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      // 'link', // 插入链接
      // 'list', // 列表
      'justify', // 对齐方式
      // 'quote', // 引用
      // 'emoticon', // 表情
      // 'image', // 插入图片
      'table', // 表格
      // 'video', // 插入视频
      // 'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    phoneEditor.create()
      phoneEditor.txt.html(_this.existingBasisVal)
      phoneEditor.$textElem.attr('contenteditable', this.writeable)
      
  },
  methods: {},
  computed: {},
  watch: {
    existingBasisVal (val) {
      phoneEditor.txt.html(val)
    }
  }
}
</script>

<style lang="scss" scoped>
#existingBasis {
  width: 100%;
  height: 250px;
  font-family:'宋体' !important;
}
</style>
